<template>
    <div v-if="options.display" class="topPrompt animated" :class="className">
        <div class='text'>
            {{options.text}}
        </div>
    </div>
</template>
<script>
/*
 topPrompt: {   
                //提示状态，UI显示
                display: false,
                type: 'error',
                text: '',
                timeout: 3000,
            }
*/

let timeout;

export default {

    name: 'topPrompt',

    props: {
        options: {
            type: Object,
            default: {}
        }
    },

    computed: {
        className: function() {
            //  fadeInUp
            let classAnim = 'zoomIn',
                className = 'topPromptSuccessful',
                topPromptType = this.options.type.trim().toLowerCase();
            if (topPromptType == 'successful') {
                className = 'topPromptSuccessful';
            } else if (topPromptType == 'error') {
                className = 'topPromptError';
            }
            if(this.options.display){
                className = className + ' ' + classAnim;
            }
            return className;
        },
    },

    watch: {
        options: {
            handler: function(val, oldVal) {
                let tthis = this;

                if (this.options.timeout && this.options.display) {
                    clearTimeout(timeout);
                    timeout = setTimeout(function() {
                        tthis.options.display = false;
                    }, this.options.timeout);
                }
            },
            deep: true
        }
    }

}
</script>
<style scoped>
.topPrompt {
    z-index: 9999;
    position: fixed;
    top: 44px;
    left: 0;
    width: 100%;
    color: #fff;
    font-size: 13px;
    animation-duration: .2s;
}

.text {
    line-height: 20px;
    min-height: 20px;
    padding: 12px 20px;
    text-align: center;
    font-size: 14px;
}

.topPromptError {
    background-color: #e56061;
}

.topPromptSuccessful {
    background-color: #1ec671;
}
</style>
